<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hello vue</title>
    <link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="./lib/vue/vue.js"></script>
    <script type="text/javascript" src="./lib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/bootstrap/js/bootstrap.js"></script>
</head>

<body>
    <div class="container" id="box">
        <nav class="nav nav-inline">
          <a class="nav-link active"  href="https://cn.vuejs.org/v2/guide/">Vue Guide</a>
          <a class="nav-link" href="https://cn.vuejs.org/v2/api/">Vue Api</a>
          <a class="nav-link disabled" href="https://cn.vuejs.org/v2/examples/">Vue Examples</a>
        </nav>
        <form role="form" class="form-horizontal">
            <div class="row">
                <div class="form-group">
                    <label for="username">用户名：</label>
                    <input type="text" v-model="stu.username" id="username" class="form-control" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>
                    <input type="password" class="form-control" v-model="stu.password" id="password" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="email">Email：</label>
                    <input type="email" v-model="stu.email" class="form-control" id="email" placeholder="请输入Email">
                </div>
                <div class="form-group">
                    <button type="button" v-on:click="addStudent()" class="btn btn-primary btn-sm">添加</button>
                    <button type="button" class="btn btn-danger btn-sm" onclick="reset()">重置</button>
                </div>
            </div>
        </form>
        <div class="row">
            <caption class="center">
                <h4>用户信息列表</h4>
            </caption>
            <table class="table table-border">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>用户名</th>
                        <th>邮箱</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in list">
                        <td scope="row">{{index + 1}}</td>
                        <td>{{item.username}}</td>
                        <td>{{item.email}}</td>
                        <td><a name="" id="" class="btn btn-primary btn-sm" href="#" role="button">修改</a>
                            <a name="" id="" class="btn btn-danger btn-sm" href="#"
                                role="button" data-toggle="modal" v-on:click="stu.rowIndex = index" data-target="#delInfoModal">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row">
            <div class="text-center" v-show="list.length == 0">暂无数据...</div>
        </div>

        <div class="row">
            <div v-bind:data-index="stu.rowIndex" class="modal fade" id="delInfoModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
                aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                            <h4 class="modal-title" id="modelTitleId">提示</h4>
                        </div>
                        <div class="modal-body">
                            您确定删除当前数据？
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delInfoModal" v-on:click="deleteStu(stu.rowIndex)">确定</button>
                            <button type="button" class="btn btn-defautl" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>


<script>
    var v = new Vue({
        el: '#box',
        data: {
            stu: {
                rowIndex: -1,
                username: '',
                password: '',
                email: ''
            },
            list: []
        },
        methods: {
            addStudent: function () {
                this.list.push({
                    username: this.stu.username,
                    email: this.stu.email
                });

                this.stu.username = '';
                this.stu.password = '';
                this.stu.email = '';
            },

            deleteStu: function (index) {
                console.log(index);
                this.list.splice(index, 1);
            }
        }

    });
</script>

</html>